---
title: Boutons
image: /images/user-guide/views/filter.png
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="Header" />
</Frame>

Une liste de boutons et de groupes de boutons utilisés dans toute l'application.

## Bouton

<Tabs>

<Tab title="Usage">

```jsx
import { Button } from "@/ui/input/button/components/Button";

export const MyComponent = () => {
  return (
    <Button
      className
      Icon={null}
      title="Title"
      fullWidth={false}
      variant="primary"
      size="medium"
      position="standalone"
      accent="default"
      soon={false}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Propriétés    | Type                  | Description                                                                                                                                           |
| ------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| nomDeClasse   | chaîne                | Nom de classe facultatif pour un style supplémentaire                                                                                                 |
| Icône         | `React.ComponentType` | Un composant d'icône facultatif qui est affiché dans le bouton                                                                                        |
| titre         | chaîne                | Le contenu texte du bouton                                                                                                                            |
| largeurTotale | booléen               | Définit si le bouton doit occuper toute la largeur de son conteneur                                                                                   |
| variante      | chaîne                | La variante de style visuel du bouton. Les options incluent `primaire`, `secondaire` et `tertiaire`                                   |
| taille        | chaîne                | La taille du bouton. A deux options : `small` et `medium`                                                             |
| position      | chaîne                | La position du bouton par rapport à ses voisins. Les options incluent : `indépendant`, `gauche`, `droite` et `milieu` |
| accent        | chaîne                | La couleur d'accentuation du bouton. Options include: `default`, `blue`, and `danger`                                 |
| Bient\u00f4t  | booléen               | Indique si le bouton est marqué comme "bientôt" (comme pour les futures fonctionnalités)                                           |
| désactivé     | booléen               | Spécifie si le bouton est désactivé ou non                                                                                                            |
| focus         | booléen               | Détermine si le bouton a le focus                                                                                                                     |
| auClique      | fonction              | Une fonction de rappel qui se déclenche lorsque l'utilisateur clique sur le bouton                                                                    |

</Tab>

</Tabs>

## Groupe de Boutons

<Tabs>
<Tab title="Usage">
```jsx
import { Button } from "@/ui/input/button/components/Button";
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

export const MyComponent = () => {
return ( <ButtonGroup variant="primary" size="large" accent="blue" className>
<Button
className
Icon={null}
title="Button 1"
fullWidth={false}
variant="primary"
size="medium"
position="standalone"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 2"
fullWidth={false}
variant="secondary"
size="medium"
position="left"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 3"
fullWidth={false}
variant="tertiary"
size="medium"
position="right"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/> </ButtonGroup>
);
};

````
</Tab>

<Tab title="Props">


| Props | Type | Description |
|-------|------|-------------|
| variant | string | The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary` |
| size | string | The size of the buttons within the group. Has two options: `medium` and `small` |
| accent | string | The accent color of the buttons within the group. Options include `default`, `blue` and `danger` |
| className | string | Optional class name for additional styling |
| children | ReactNode | An array of React elements representing the individual buttons within the group |



</Tab>
</Tabs>


## Floating Button

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButton
      className
      Icon={IconSearch}
      title="Title"
      size="medium"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={true}
    />
  );
};
````

</Tab>

<Tab title="Props">

| Propriétés     | Type                  | Description                                                                                                                                         |
| -------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| nomDeClasse    | chaîne                | Nom facultatif pour un style supplémentaire                                                                                                         |
| Icône          | `React.ComponentType` | Un composant d'icône facultatif qui est affiché dans le bouton                                                                                      |
| titre          | chaîne                | Le contenu texte du bouton                                                                                                                          |
| taille         | chaîne                | La taille du bouton. A deux options : `small` et `medium`                                                           |
| position       | chaîne                | La position du bouton par rapport à ses voisins. Les options incluent : `indépendant`, `gauche`, `milieu`, `droite` |
| appliquerOmbre | booléen               | Détermine s'il faut appliquer une ombre à un bouton                                                                                                 |
| appliquerFlou  | booléen               | Détermine s'il faut appliquer un effet flou au bouton                                                                                               |
| désactivé      | booléen               | Détermine si le bouton est désactivé                                                                                                                |
| focus          | booléen               | Indique si le bouton a le focus                                                                                                                     |

</Tab>
</Tabs>

## Groupe de Boutons Flottants

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButtonGroup size="small">
      <FloatingButton
        className
        Icon={IconClipboardText}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
        focus={true}
      />
      <FloatingButton
        className
        Icon={IconCheckbox}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
      />
    </FloatingButtonGroup>
  );
};
```

</Tab>

<Tab title="Props">

| Propriétés | Type      | Description                                                                               | Par défaut |
| ---------- | --------- | ----------------------------------------------------------------------------------------- | ---------- |
| taille     | chaîne    | La taille du bouton. A deux options : `small` et `medium` | petit      |
| enfants    | ReactNode | Un tableau d'éléments React représentant les boutons individuels dans le groupe           |            |

</Tab>

</Tabs>

## Bouton Icône Flottant

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingIconButton
      className
      Icon={IconSearch}
      size="small"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={false}
      onClick={() => console.log("click")}
      isActive={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Propriétés     | Type                  | Description                                                                                                                                           |
| -------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| nomDeClasse    | chaîne                | Nom facultatif pour un style supplémentaire                                                                                                           |
| Icône          | `React.ComponentType` | Un composant d'icône facultatif qui est affiché dans le bouton                                                                                        |
| taille         | chaîne                | La taille du bouton. A deux options : `small` et `medium`                                                             |
| position       | chaîne                | La position du bouton par rapport à ses voisins. Les options incluent : `indépendant`, `gauche`, `droite` et `milieu` |
| appliquerOmbre | booléen               | Détermine s'il faut appliquer une ombre à un bouton                                                                                                   |
| appliquerFlou  | booléen               | Détermine s'il faut appliquer un effet flou au bouton                                                                                                 |
| désactivé      | booléen               | Détermine si le bouton est désactivé                                                                                                                  |
| focus          | booléen               | Indique si le bouton a le focus                                                                                                                       |
| auClique       | fonction              | Une fonction de rappel qui se déclenche lorsque l'utilisateur clique sur le bouton                                                                    |
| estActif       | booléen               | Détermine si le bouton est dans un état actif                                                                                                         |

</Tab>

</Tabs>

## Groupe de Boutons Icône Flottants

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  const iconButtons = [
    {
      Icon: IconClipboardText,
      onClick: () => console.log("Button 1 clicked"),
      isActive: true,
    },
    {
      Icon: IconCheckbox,
      onClick: () => console.log("Button 2 clicked"),
      isActive: true,
    },
  ];

  return (
    <FloatingIconButtonGroup
    className
    size="small"
    iconButtons={iconButtons} />
  );
};

```

</Tab>

<Tab title="Props">

| Propriétés   | Type    | Description                                                                                                                                                                                                                                                                                                                    |
| ------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| nomDeClasse  | chaîne  | Nom facultatif pour un style supplémentaire                                                                                                                                                                                                                                                                                    |
| taille       | chaîne  | La taille du bouton. A deux options : `small` et `medium`                                                                                                                                                                                                                                      |
| boutonsIcône | tableau | Un tableau d'objets, chacun représentant un bouton icône dans le groupe. Chaque objet doit inclure le composant d'icône que vous souhaitez afficher dans le bouton, la fonction que vous souhaitez appeler lorsqu'un utilisateur clique sur le bouton, et si le bouton doit être actif ou non. |

</Tab>

</Tabs>

## Bouton Clair

<Tabs>
<Tab title="Usage">

```jsx
import { LightButton } from "@/ui/input/button/components/LightButton";

export const MyComponent = () => {
  return <LightButton
  className
  icon={null}
  title="Title"
  accent="secondary"
  active={false}
  disabled={false}
  focus={true}
  onClick={()=>console.log('click')}
  />;
};
```

</Tab>

<Tab title="Props">

| Propriétés  | Type              | Description                                                                                                             |
| ----------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------- |
| nomDeClasse | chaîne            | Nom facultatif pour un style supplémentaire                                                                             |
| icône       | `React.ReactNode` | L'icône que vous voulez afficher dans le bouton                                                                         |
| titre       | chaîne            | Le contenu texte du bouton                                                                                              |
| accent      | chaîne            | La couleur d'accentuation du bouton. Les options incluent : `secondaire` et `tertiaire` |
| actif       | booléen           | Détermine si le bouton est dans un état actif                                                                           |
| désactivé   | booléen           | Détermine si le bouton est désactivé                                                                                    |
| focus       | booléen           | Indique si le bouton a le focus                                                                                         |
| auClique    | fonction          | Une fonction de rappel qui se déclenche lorsque l'utilisateur clique sur le bouton                                      |

</Tab>

</Tabs>

## Bouton Icône Clair

<Tabs>
<Tab title="Usage">

```jsx
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <LightIconButton
      className
      testId="test1"
      Icon={IconSearch}
      title="Title"
      size="small"
      accent="secondary"
      active={true}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Propriétés  | Type                  | Description                                                                                                             |
| ----------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| nomDeClasse | chaîne                | Nom facultatif pour un style supplémentaire                                                                             |
| testId      | chaîne                | Identifiant de test pour le bouton                                                                                      |
| Icône       | `React.ComponentType` | Un composant d'icône facultatif qui est affiché dans le bouton                                                          |
| titre       | chaîne                | Le contenu texte du bouton                                                                                              |
| taille      | chaîne                | La taille du bouton. A deux options : `small` et `medium`                               |
| accent      | chaîne                | La couleur d'accentuation du bouton. Les options incluent : `secondaire` et `tertiaire` |
| actif       | booléen               | Détermine si le bouton est dans un état actif                                                                           |
| désactivé   | booléen               | Détermine si le bouton est désactivé                                                                                    |
| focus       | booléen               | Indique si le bouton a le focus                                                                                         |
| onClick     | fonction              | Une fonction de rappel qui se déclenche lorsque l'utilisateur clique sur le bouton                                      |

</Tab>

</Tabs>

## Bouton Principal

<Tabs>
<Tab title="Usage">

```jsx
import { MainButton } from "@/ui/input/button/components/MainButton";
import { IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <MainButton
      title="Checkbox"
      fullWidth={false}
      variant="primary"
      soon={false}
      Icon={IconCheckbox}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Propriétés                | Type                             | Description                                                                                                 |
| ------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| titre                     | chaîne                           | Le contenu texte du bouton                                                                                  |
| largeurTotale             | booléen                          | Définit si le bouton doit occuper toute la largeur de son conteneur                                         |
| variante                  | chaîne                           | La variante de style visuel du bouton. Les options incluent `primaire` et `secondaire`      |
| Bient\u00f4t              | booléen                          | Indique si le bouton est marqué comme "bientôt" (comme pour les futures fonctionnalités) |
| Icône                     | `React.ComponentType`            | Un composant d'icône facultatif qui est affiché dans le bouton                                              |
| Propriétés React `button` | `React.ComponentProps<'button'>` | Toutes les propriétés standard des boutons HTML sont prises en charge                                       |

</Tab>

</Tabs>

## Bouton Icône Arrondie

<Tabs>
<Tab title="Usage">

```jsx
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <RoundedIconButton
      Icon={IconSearch}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Propriétés                | Type                                            | Description |
| ------------------------- | ----------------------------------------------- | ----------- |
| Icône                     | `React.ComponentType`                           |             |
| Propriétés React `button` | `React.ButtonHTMLAttributes<HTMLButtonElement>` |             |

</Tab>

</Tabs>
